<template>
    <div class="contentHome">
        <Row>
            <Col :xs="24">
                <div class="margin-up-down">
                    <Button type="info" @click="add">
                        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                    </Button>
                </div>
                <!--类型选择-->
                <div class="margin-up-down">
                    <Select v-model="type1" style="width:100px" clearable placeholder="类型">
                        <Option
                            v-for="item in cityList"
                            :value="item.id"
                            :key="item.id"
                            style='text-align:center'
                        >{{ item.label }}</Option>
                    </Select>
                </div>
                <!--发布状态-->
                <div class="margin-up-down">
                    <Select v-model="type2" style="width:100px" clearable placeholder="状态">
                        <Option
                            v-for="(item,index) in cityLists"
                            :value="item.id"
                            :key="index"
                            style='text-align:center'
                        >{{ item.label }}</Option>
                    </Select>
                </div>
                <!--搜索输入-->
                <div class="margin-up-down">
                    <Input v-model.trim="val" placeholder="请输入文章名称进行检索" style="width: 200px;" clearable/>
                </div>
                <!--搜索按钮-->
                <div class="margin-up-down">
                    <Button type="primary" icon="ios-search" @click="search" style='margin:0 10px;'></Button>
                </div>
            </Col>
        </Row>
        <div class="main">
            <Table stripe :columns="column" :data="tableList" ></Table>
        </div>
        <!--分页器-->
        <div class="page">
            <Page :total="contentSize" :current='pageNo' show-total show-elevator @on-change="pageChange"/>
        </div>
    </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            type1: "",
            type2: "",
            val: "",
            tableList: [],
            contentSize: 10,
            pageNo: 1,
            pageSize: 10,
            // 文章类型列表
            cityList: [
                {
                    value: "文章",
                    label: "文章",
                    id: 1
                }
            ],
            // 发布状态列表
            cityLists: [
                {
                    value: "未发布",
                    label: "未发布",
                    id: 0
                },
                {
                    value: "已发布",
                    label: "已发布",
                    id: 1
                }
            ],
            query: {},
            column:[
                {
                    title:"排序",
                    key:"sum",
                    align:"center",
                    width:60,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {
                    title:"资讯标题",
                    key:"title",
                    align:"center",
                    width:300,
                    render: (h,params) => {
                       let a = params.row.title;
                       return h('div', [
                    　　　　[
                    　　　　h('span', {
                    　　　　　　style: {
                    　　　　　　　　display: 'inline-block',
                    　　　　　　　　width: params.column._width*0.8+'px',
                    　　　　　　　　overflow: 'hidden',
                    　　　　　　　　textOverflow: 'ellipsis',
                    　　　　　　　　whiteSpace: 'nowrap',
                    　　　　　　},
                    　　　　　　}, a)
                    　　　　]
                    　　])
                   }
                },
                {
                    title:"资讯类型",
                    key:"type",
                    align:"center",
                    // width:90,
                    render: (h,params) => {
                        let a = params.row.type == 1 ? "文章" : "视频";
                        return h('div', [
                        　　　　[
                        　　　　h('span', {
                        　　　　　　}, a)
                        　　　　]
                        　　])
                    }
                },
                // {
                //     title:"资讯栏目",
                //     key:"columnName",
                //     align:"center",
                //     // width:90
                // },
                {
                    title:"阅读量",
                    key:"readNum",
                    align:"center",
                    width:90
                },
                {
                    title:"收藏量",
                    key:"countFollow",
                    align:"center",
                    width:90
                },
                {
                    title:"优先级",
                    key:"showindex",
                    align:"center",
                    width:90
                },
                {
                    title:"时间",
                    key:"updateTime",
                    align:"center",
                    // width:160
                },
                {
                    title:"状态",
                    key:"isEnable",
                    align:"center",
                    // width:90,
                    render: (h,params) => {
                        let a = params.row.isEnable == 1 ? "已发布" : "未发布";
                        let style = params.row.isEnable == 0 ? {color:'red'} : {};
                        return h('div', [
                        　　　　[
                        　　　　h('span', {
                        　　　　　　style,
                        　　　　　　}, a)
                        　　　　]
                        　　])
                    }
                },
                {
                    title:"设置",
                    align:"center",
                    width: 170,
                    fixed:"right",
                    render: (h,params) => {
                        let item = params.row
                        let isEnable = params.row.isEnable
                        let name = isEnable == 1 ? "不发布" : "发布"
                        return [
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(item)
                                        }
                                    },
                                    style: {
                                        color: '#5362e1',
                                        margin: "0px 6px"
                                    },
                                },
                                "编辑"
                            ),
                            "|",
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                color: '#21c780',
                                margin: "0px 6px"
                            },
                                    on: {
                                        click: () => {
                                            if(isEnable == 1) {
                                                this.topShelf(item)
                                            } else {
                                                this.bottomShelf(item)
                                            }
                                        }
                                    }
                                },
                                name
                            ),
                            "|",
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            this.roof(item)
                                        }
                                    },
                                    style: {
                                        color: '#ff9966',
                                        margin: "0px 6px"
                                    },
                                },
                                "置顶"
                            ),
                            "|",
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            this.update(item)
                                        }
                                    },
                                    style: {
                                        color: '#FEA443',
                                        margin: "0px 6px"
                                    },
                                },
                                "更新缓存"
                            )
                        ];
                    }
                }
            ]
        };
    },
    created() {
        this.type1 = isNaN(parseInt(this.$route.query.type1))?null:parseInt(this.$route.query.type1);
        this.type2 = isNaN(parseInt(this.$route.query.type2))?null:parseInt(this.$route.query.type2);
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/publicOperation/healthInformation/list",
                title: "健康资讯运营管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo;
        if (pageNo) {
            this.pageNo = Number(pageNo);
        }
        this.getContentData(this.pageNo,this.val,this.type1,this.type2);
    },
    methods: {
        // 添加新内容
        add() {
            let query = {
                pageNo: this.pageNo,
                type1: this.type1,
                type2: this.type2,
            };
            this.functionJS.queryNavgationTo(
                this,
                "/index/publicOperation/healthInformation/add",
                //公用方法
                query
            );
        },
        // 加载数据
        getContentData(pageNo, val, type, enable) {
            let params = {
                pageNo,
                pageSize: 10
            };
            params.title = Boolean(val) ? val : "";
            params.type = Boolean(type) ? type : "";
            params.isEnable = enable;
            this.$axios.post(api.findArticleManage, params).then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                    this.contentSize = ret.total;
                    if(ret.records){
                        ret.records.forEach((item,index) => {
                            item.sum = this.addZeros(index);
                        })
                        this.tableList = ret.records;
                    } else {
                        this.tableList = []
                    }

                } else {
                    this.$Message.info("不允许访问");
                }
            });
        },
        // 分页器改变
        pageChange(index) {
            this.pageNo = index;
            this.getContentData(index, this.val, this.type1, this.type2);
        },
        //关键字查询列表
        search() {
            this.pageNo = 1
            let type1 = this.type1;
            let type2 = this.type2;
            if (type1 == null) {
                type1 = "";
            }
            if (type2 == null) {
                type2 = "";
            }
            this.getContentData(1, this.val, type1, type2);
        },
        // 下架
        bottomShelf(item, index) {
            this.$axios
                .post(api.updateIsDeleteById, {
                    id: item.articleId,
                    isEnable: 1
                })
                .then(res => {
                    if (res.data.code) {
                        this.pageChange(1)
                        this.$Message.info("操作成功");
                    } else {
                        this.$Message.info("操作失败,请重试");
                    }
                });
        },
        // 上架
        topShelf(item, index) {
            this.$axios
                .post(api.updateIsDeleteById, {
                    id: item.articleId,
                    isEnable: 0
                })
                .then(res => {
                    if (res.data.code) {
                        this.pageChange(1)
                        this.$Message.info("操作成功");
                    } else {
                        this.$Message.info("操作失败,请重试");
                    }
                });
        },
        //置顶
        roof(item, index, event) {
            if (!Boolean(item.idelete)) {
                this.$axios
                    .post(api.updateShowIndexById, {
                        showIndex: 1,
                        id: item.articleId
                    })
                    .then(res => {
                        if (res.data.code) {
                            this.pageChange(1)
                            this.$Message.info("置顶成功");
                        } else {
                            this.$Message.info("置顶失败,请重试");
                        }
                    });
            } else {
                this.$Message.info("置顶失败,当前文章下架状态");
            }
        },
        //根据ID修改对应的新闻资讯
        edit(item) {
            let id = item.articleId;
            this.functionJS.queryNavgationTo(
                this,
                "/index/publicOperation/healthInformation/edit",
                {
                    //公用方法
                    id,
                    pageNo: this.pageNo,
                    type1: this.type1,
                    type2: this.type2,
                }
            );
        },
        //更新缓存
        update(item){
          let params = {};
          params.id = item.articleId;
          this.$axios
            .post(api.updateOperateArticleCache, params)
            .then(resp => {
              if (resp.data.success) {
                this.$Message.info("更新成功");
              } else {
              }
            })
            .catch(err => {
              // this.$Message.info("服务器超时，请重试");
            });
        }
      }
};
</script>

<style scoped lang = "less">
.contentHome {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    /*标题*/
    .contentHomeTitle {
        width: 100%;
        padding-left: 20px;
        background: #ccc;
        height: 50px;
        line-height: 50px;
        border-bottom: 2px solid black;
        .homeBtn {
            text-align: center;
            width: 100px;
            height: 40px;
            color: #fff;
            line-height: 40px;
            float: right;
            margin-top: 5px;
            background: red;
            border: 1px solid #ddd;
            border-radius: 6px;
            margin-right: 30px;
            outline: none;
        }
    }
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .main {
        width: 100%;
        /* padding: 0 10px; */
    }
    /*类型*/
    .homeSelect {
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
         /* justify-content: space-around; */
        align-items: center;
        .selectType {
            width: 200px;
            margin:0 10px;
            select {
                width: 80px;
            }
            span {
                margin-right: 15px;
            }
        }
        .search {
            width: 200px;
        }
        .submit {
            background: #02A198;
            padding: 5px 20px;
            border: none;
            outline: none;
            color: #fff;
        }
    }
    /*分页器*/
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
</style>
